﻿<!--IntervalBox 自定义组件声明-->
<!--X-Template 组件模板-->
<script type="text/x-template" id="interval-box-component-tempalte">
    <div class="interval-box" v-loading="loading" element-loading-text="智能推荐中">
        <div class="am" v-show="amIntervals && amIntervals.length>0">
             <div style="padding-left:10px;">上午</div>
            <div class="am-container" >
                <interval v-for="(item,index) in amIntervals" :key="item.id"
                                                              :name="item.title"
                                                              :selected-id="selectedId"
                                                              :suggestion="item.suggestionId"
                                                              :appoint-info="item.displayName"
                                                              :start-time="item.startTime"
                                                              :end-time="item.endTime"
                                                              :max-count="item.maxCount"
                                                              v-on:click="intervalClickedHandler"
                                                              :current="item.currentCount"
                                                              :id="item.id">

                </interval>
            </div>
        </div>
        <div class="pm" v-show="pmIntervals && pmIntervals.length>0">
            <div style="padding-left:10px;">下午</div>
            <div class="pm-container"  >
                <interval v-for="(item,index) in pmIntervals" :key="item.id"
                                                              :name="item.title"
                                                              :selected-id="selectedId"
                                                              :suggestion="item.suggestionId"
                                                              :appoint-info="item.displayName"
                                                              :start-time="item.startTime"
                                                              :end-time="item.endTime"
                                                              :max-count="item.maxCount"
                                                              v-on:click="intervalClickedHandler"
                                                              :current="item.currentCount"
                                                              :id="item.id">
                </interval>
            </div>
        </div>
        <div class="(no-interval" v-show="!intervals || intervals.length===0 &&!init">
            <div class="no-data-text">
                 无推荐号池
            </div>
        </div>
    </div>
</script>
<script>
    var IntevarBoxComponent={
          components:{
               'interval':IntervalComponent
          },
          props:{ // 组件属性
             date:Date,
             applyItems:Array,
             value:{
                type:String,
                default:null
             }
          },
          model:{
            prop:'value',  // 双向绑定对应的值来源属性
            event:'change' // 双向绑定对应的事件名
          },
          template:'#interval-box-component-tempalte',    // 模板选择器
          watch:{
                date(value){
                    const vm =this;
                    vm.intervals=[];
                },
                applyItems(value){
                    const vm =this;
                    vm.intervals=[];
                },
                intervals(value){
                    const cvm = this;
                    cvm.amIntervals= value.filter(item=>item.periodOfDay===0);
                    cvm.pmIntervals= value.filter(item=>item.periodOfDay===1);
                },
                value(value){
                    const cvm =this;
                    cvm.selectedId=value;
                }
          },
          data:function(){
            return {
                intervals:[],
                amIntervals:[],
                pmIntervals:[],
                selectedId:null,
                loading:false,
                init:true
            }
          },
          methods:{
            getSuggestion(){
                const cvm = this;
                cvm.loading=true;
                if(cvm.date && cvm.applyItems && cvm.applyItems.length >0){
                    var dateStr =dayjs(cvm.date).format('YYYY-MM-DD hh:mm:ss') ;
                    axios.post('/api/his-appoint/get-suggestion',
                    {
                            applyItems:cvm.applyItems.map(item=>item.id),
                            date:dateStr
                    }).then(res=>{
                        let data = res.data;
                        if(data.code===0){
                            cvm.intervals=data.data.intervals;
                            cvm.loading=false;
                            if(!data.data.intervals || data.data.intervals.length===0){
                               cvm.$message({
                                      message: '无推荐号段！',
                                      type: 'warning'
                                    });
                            }
                        }
                    });
                }
            },
            // 号段点击事件处理
            intervalClickedHandler(item){
                const cvm= this;
                cvm.selectedId=item.id;
                // 组件的change事件
                cvm.$emit('change',cvm.value);
                cvm.$emit('change-value',item);
            }
          },
          created(){

          }
    }
</script>
<style>
    .interval-box {
        display: flex;
        flex-direction: column;
        padding-top: 15px;
        gap: 10px;
        flex:1;
    }

        .interval-box .am {
            display: flex;
            flex-direction: column;
            padding: 20px;
            border-radius: 5px;
            background-color: #f0f5f9;
        }

            .interval-box .am .am-container {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                gap: 10px;
                padding: 10px;
            }

        .interval-box .pm {
            display: flex;
            padding: 20px;
            flex-direction: column;
            border-radius: 5px;
            background-color: #f0f5f9;
        }

            .interval-box .pm .pm-container {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                gap: 10px;
                padding: 10px;
            }

            .interval-box .no-interval{
                flex:1;
                align-content: center;
                justify-items: center;
            }

            .interval-box .no-interval .no-data-text{
                color: #606266;
            }
</style>